{extend name="extra@admin/content"}

{block name="content"}
<form class="layui-form layui-box" style='padding:25px 30px 20px 0' action="__SELF__" data-auto="true" method="post">

    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="" autocomplete="off" placeholder="请输入优惠券名称"
                   class="layui-input" value="{$vo.name|default=''}" required title="请输入">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图片</label>
        {if isset($vo.img)}
        <div class="uploadimage" data-tips-image="{$vo.img}" style="background-image: url(&quot;{$vo.img}&quot;);"><input type="hidden" name="img" data-md5="21fb6b5a3c9b8152abaa368860709d0c" value="{$vo.img}"></div>
        {else/}
        <div class="uploadimage"><input type="hidden" name="img"/></div>
        {/if}

        <a data-file="one" data-field="img" data-type="png,jpg,jpeg" data-uptype="qiniu" href="javascript:void(0)"
           class="uploadbutton">上传图片</a>
        <script>
            require(['jquery'], function () {
                $('[name="img"]').on('change', function () {
                    $(this).parent().attr('data-tips-image', this.value).css('backgroundImage', 'url(' + this.value + ')');
                });
            });
        </script>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品分类</label>
        <div class="layui-input-block">
            <select name="cat_id" lay-verify="" lay-search required>
                <option value="">通用</option>
                {volist name='cat' id='voo'}
                <option {if isset($vo.cat_id)}{if $vo.cat_id==$voo.id}selected{/if}{/if} value="{$voo.id}">{$voo.title}</option>
                {/volist}
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">发放规则</label>
            <div class="layui-form-mid">（满）</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="condition" placeholder="￥" autocomplete="off" class="layui-input" value="{$vo.condition|default=''}" required  pattern="^\d+(\.\d+)?$" title="请输数字">
            </div>
            <div class="layui-form-mid">发放数量</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="create_num" autocomplete="off" class="layui-input" required pattern="^[1-9]\d*$" title="请输数字" value="{$vo.create_num|default=''}">
            </div>
            <div class="layui-form-mid">期限</div>
            <div class="layui-input-inline">
                <input type="text" name="send" class="layui-input" id="test6" placeholder=" - " value="{if isset($vo.send_start_time)}{$vo.send_start_time|date='Y-m-d',###} - {$vo.send_end_time|date='Y-m-d',###}{/if}" required>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">使用规则</label>
            <div class="layui-form-mid">（满）</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="morethan" placeholder="￥" autocomplete="off" class="layui-input" required pattern="^\d+(\.\d+)?$" title="请输数字" value="{$vo.morethan|default=''}">
            </div>
            <div class="layui-form-mid">（减）&nbsp;&nbsp;&nbsp;</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="reduce" placeholder="￥" autocomplete="off" class="layui-input" required pattern="^\d+(\.\d+)?$" title="请输数字" value="{$vo.reduce|default=''}">
            </div>
            <div class="layui-form-mid">期限</div>
            <div class="layui-input-inline">
                <input type="text" name="use" class="layui-input" id="test7" placeholder=" - " value="{if isset($vo.use_start_time)}{$vo.use_start_time|date='Y-m-d',###} - {$vo.use_end_time|date='Y-m-d',###}{/if}" required>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">开启发放</label>
        <div class="layui-input-block">
            <input type="checkbox" {if isset($vo.status)}{if $vo.status==1}checked{/if}{/if} name="status" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭" required>
        </div>
    </div>

    <div class="hr-line-dashed"></div>

    <div class="layui-form-item text-center">
        {if isset($vo['id'])}<input type='hidden' value='{$vo.id}' name='id'/>{/if}
        <button class="layui-btn" type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>
    <script>window.form.render();</script>
    <script>
        //日期范围
        laydate.render({
            elem: '#test6'
            ,range: true
            ,theme: 'grid'
        });
        //日期范围
        laydate.render({
            elem: '#test7'
            ,range: true
            ,theme: 'grid'
        });

    </script>

    <script type="text/javascript">
        require(['jquery'], function () {
            var tpl = '<div class="uploadimage transition uploadimagemtl"><a href="javascript:void(0)" class="layui-icon upload-option-button">&#x1006;</a></div>';
            $('[name="images"]').on('change', function () {
                var input = this, values = [], srcs = this.value.split('|');
                $(this).prevAll('.uploadimage').map(function () {
                    values.push($(this).attr('data-tips-image'));
                }), $(this).prevAll('.uploadimage').remove();
                values.reverse();
                for (var i in srcs) {
                    values.push(srcs[i]);
                }
                this.value = values.join('|');
                for (var i in values) {
                    var $tpl = $(tpl).attr('data-tips-image', values[i]).css('backgroundImage', 'url(' + values[i] + ')');
                    $tpl.data('input', input).data('srcs', values).data('index', i);
                    $tpl.on('click', 'a', function (e) {
                        e.stopPropagation();
                        var $cur = $(this).parent();
                        $.msg.confirm('确定要移除这张图片吗？', function () {
                            var data = $cur.data('srcs');
                            delete data[$cur.data('index')];
                            $cur.data('input').value = data.join('|');
                            $cur.remove();
                        });
                    });
                    $(this).before($tpl);
                }
            });
        });
    </script>
</form>
{/block}
